import React, { Component } from "react"
import  { Link } from 'react-router'
import fetchData from '../../util/fetch'
import { Tabs, Carousel } from 'antd'
import beautiImg from '../../img/beautiful.png'

const TabPane = Tabs.TabPane;
class Dalshabet extends Component {
	constructor(props) {
		super(props)
		this.state = {
			banner: [],
			pregnancyName: {},//3-1	妊娠期
			pregnancyList: [],//3-1-1	妊娠期列表
			puerperiumName: {},//3-2	产褥期
			puerperiumList: [],//3-2-1	产褥期列表
			lactationName: {},//3-3	产后调理
			lactationList: [],//3-3-1	产后调理列表
			maleName: {},//3-4	日常养护
			maleList: [],//3-4-1	日常养护列表
			defKey: '1'
		}
	}
	
	//3美研中心、
	bannerData(url, opts) {
		fetchData(url, opts, function (res) {
			let data = eval(res.data);
			this.setState({
				banner: data
			})
		}.bind(this))
	}
	
	getData(url, opts) {
		fetchData(url, opts, function (res) {
			let data = eval(res.data);
			switch (opts.str) {
				case "3-1":
					this.setState({
						pregnancyName: data
					});
					break;
				case "3-1-1":
					this.setState({
						pregnancyList: data
					});
					break;
				case "3-2":
					this.setState({
						puerperiumName: data
					});
					break;
				case "3-2-1":
					this.setState({
						puerperiumList: data
					});
					break;
				case "3-3":
					this.setState({
						lactationName: data
					});
					break;
				case "3-3-1":
					this.setState({
						lactationList: data
					});
					break;
				case "3-4":
					this.setState({
						maleName: data
					});
					break;
				case "3-4-1":
					this.setState({
						maleList: data
					});
					break;
			}
			
		}.bind(this))
	}
	
	componentWillMount() {
		// this.setState({
		// 	defKey: this.props.params.defKey
		// })
		
		//3美研中心banner
		this.bannerData('/crm/api/v1/web/banner/findOneByType', { 'dataId': 3 })
		// //3-1	妊娠期
		// this.getData('/crm/api/v1/web/news/findOneByType', { 'str': "3-1" })
		// //3-1-1	妊娠期列表
		// this.getData('/crm/api/v1/web/news/findListByType', { 'str': "3-1-1" })
		// //3-2	产褥期
		// this.getData('/crm/api/v1/web/news/findOneByType', { 'str': "3-2" })
		// //3-2-1	产褥期列表
		// this.getData('/crm/api/v1/web/news/findListByType', { 'str': "3-2-1" })
		// //3-3	产后调理
		// this.getData('/crm/api/v1/web/news/findOneByType', { 'str': "3-3" })
		// //3-3-1	产后调理列表
		// this.getData('/crm/api/v1/web/news/findListByType', { 'str': "3-3-1" })
		// //3-4	日常养护
		// this.getData('/crm/api/v1/web/news/findOneByType', { 'str': "3-4" })
		// //3-4-1	日常养护列表
		// this.getData('/crm/api/v1/web/news/findListByType', { 'str': "3-4-1" })
		
	}

    componentDidMount() {
        if (this.props.params.anchor) {
            const anchor = '.' + this.props.params.anchor;
            setTimeout(function () {
                $("body").animate({ scrollTop: $(anchor).offset().top }, 300)
            }, 200)
        }
    }
	
	renderBanners() {
		let { banner } = this.state;
		let imgurl = banner.imgUrl;
		if (!banner || banner.length == 0) {
			return null;
		}
		else {
			return (
				<div className="dalshabet-banner">
					<img alt="" src={imgurl}/>
				</div>
			)
		}
	}
	
	
	creatTabPane(modal, key, array) {
		return <TabPane tab={<Link to={`/dalshabet/${key}`}>{modal.title ? modal.title : '妊娠期'}</Link>} key={key}>
			<h3>{modal ? modal.summary : null}</h3>
			<p>{modal ? modal.content : null}</p>
			{this.renderItems(array)}
		</TabPane>
	}
	
	renderItems(item) {
		let DataItem = [];
		let settings = {
			infinite: true,
			slidesToShow: 3,
			slidesToScroll: 1,
			autoplay: true,
			arrows: true,
			dots: false,
			speed: 300,
			variableWidth: true,
			dots: false
		}
		if (!item || item.length == 0) {
			return null;
		} else {
			return (
				<div className="dalshabetImg">
					<Carousel {...settings}>
						{DataItem = item.map((val, i) => {
							
							return (
								<Link to={`/detail?id=${val.id}`} className="col-md-4" key={i}><img src={val.img1Url}/></Link>)
							console.log(val.img1Url);
						})}
					</Carousel>
				</div>
			)
		}
	}
	
	render() {
		const defKey = this.props.params.defKey;
		return (
			<div className="dalshabet">
				<div className="dalshabet-banner">{this.renderBanners()}</div>
				{/*<div className="dalshabet-content tab">*/}
				{/*<Tabs defaultActiveKey={defKey} type="card" key={defKey}>*/}
				{/*{this.creatTabPane(this.state.pregnancyName, 1, this.state.pregnancyList)}*/}
				{/*{this.creatTabPane(this.state.puerperiumName, 2, this.state.puerperiumList)}*/}
				{/*{this.creatTabPane(this.state.lactationName, 3, this.state.lactationList)}*/}
				{/*{this.creatTabPane(this.state.maleName, 4, this.state.maleList)}*/}
				{/*</Tabs>*/}
				{/*</div>*/}
				
				<img className="beautiImg anchor1" src={beautiImg}  alt="美妍中心"/>
			</div>
		)
	}
}


export default Dalshabet;
